<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Sample</title>
<meta name="viewport"
            content="width=device-width, initial-scale=1.0">
<meta name="HandheldFriendly" content="true">
</head>
<body>
<canvas id="face" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById('face');
var cxt = canvas.getContext('2d');

var r = 100;       // 定义半径
var pointX = 100; // 圆心x坐标
var pointY = 100; // 圆心y坐标

/**
 * 该方法用于绘制扇形填充。
 * @param CanvasRenderingContext2D  g             定义绘图环境
 * @param number   radius       半径。
 * @param number   startAngle  扇形起始角度（弧度）。
 * @param number   endAngle     扇形结束角度（弧度）。
 * @param number   color        填充颜色（16进制）。
 * @param number   x             圆心x坐标。
 * @param number   y             圆心y坐标。
 * @return void
 */
function pie(g, radius, startAngle, endAngle, color, x, y){
   g.fillStyle = color;
   g.beginPath();
   g.arc(x, y, radius, startAngle, endAngle, true); 
   g.closePath(); 
   g.fill();  
}
// 绘制两个最大半圆
pie(cxt, r, 3/4*Math.PI*2, 5/4*Math.PI*2, '#FF072A', pointX, pointY);
pie(cxt, r, 1/4*Math.PI*2, 3/4*Math.PI*2, '#195089', pointX, pointY);
// 绘制两个中圆，注意填充色
pie(cxt, r/2, 0, Math.PI*2, '#FF072A', pointX, pointY+r/2);
pie(cxt, r/2, 0, Math.PI*2, '#195089', pointX, pointY-r/2);
// 绘制两个最小圆，注意填充色
pie(cxt, r/4, 0, Math.PI*2, '#FF072A', pointX, pointY-r/2);
pie(cxt, r/4, 0, Math.PI*2, '#195089', pointX, pointY+r/2);
</script>
</body>
</html>
